/**
 * 移动端表单弹出组件
 */
import React, { Component } from 'react';
import classNames from 'classnames';
import { Icon } from 'antd';
import connectFn from '@/utils/connectFn';
import { StateType } from '@/common-typings';
import './index.less';

export interface CreateDrawerProps {
  isMobile: boolean;
  isLogin: boolean;
  formConfig: StateType;
}

// 是否启用
const isEnableDrawer = false;

const CreateDrawer = (ComposedComponent: typeof React.Component) => {
  class CreateDrawers extends Component<CreateDrawerProps> {
    public state = {
      visible: true,
    };

    /**
     * 关闭移动端时弹窗
     */
    public closeDrawer = () => {
      this.setState(preState => ({ visible: true }));
    };

    /**
     * 切换移动端弹窗状态
     */
    public changeState = () => {
      // @ts-ignore
      this.setState(preState => ({ visible: !preState.visible }));
    };

    render() {
      const { isMobile, formConfig } = this.props;
      const { visible } = this.state;

      if (!isEnableDrawer) {
        return <ComposedComponent {...this.props} />;
      }
      /**
       * 1. 非手机端
       * 2. 弹出窗
       * 3. 非drawer的组件
       * 以上3种场景不做任何处理
       */
      if (!isMobile || formConfig.isPopup || formConfig.noDrawer) {
        return <ComposedComponent {...this.props} />;
      }
      // return null;
      return (
        <div className="create-drawer">
          {!visible && <div className="create-drawer-mark" onClick={this.closeDrawer}></div>}
          <div className={classNames('create-drawer-body', visible ? 'closed' : 'open')}>
            <div className="create-drawer-body-text" onClick={this.changeState}>
              筛选
            </div>
            <div className="create-drawer-body-title">
              <span className="create-drawer-body-title__icon" onClick={this.closeDrawer}>
                <Icon type="left" />
              </span>
              <span>筛选条件</span>
            </div>
            <div className="create-drawer-body-content">
              <ComposedComponent {...this.props} closeDrawer={this.closeDrawer} />
            </div>
          </div>
        </div>
      );
    }
  }
  return connectFn([{ global: ['isMobile'] }])(CreateDrawers);
};

export default CreateDrawer;
